<template>
    <div class="board">
      <a-row class="title">
        <a-col :span="5" class="titleLog">
          <img src="@assets/img/board/logo-white.png"/>
        </a-col>
        <a-col :span="19" class="titleText">
           <h3>{{company.customerName}}</h3>
           <p>{{company.province}} {{company.city}} {{company.area}}</p>
        </a-col>
      </a-row>
      <div class="cusInfo">
         <p>机构编码 ：<span>{{company.customerNumber}}</span></p>
         <p>负责人 ：<span>{{company.leadername}}</span></p>
         <p>联系电话 : <span>{{company.leaderphone}}</span></p>
         <p>营业状态 :
             <span v-if="company.operationState==1" style="color:orange;">暂停营业中</span>
             <span v-if="company.operationState==0" style="color:green;">正常营业中</span>
         </p>
         <p>机构等级 :
             <span v-if="company.organizationLevel==0" style="color:#47d947;">一级以下医疗机构</span>
             <span v-if="company.organizationLevel==1" style="color:deepskyblue;">一级医疗机构</span>
             <span v-if="company.organizationLevel==2" style="color:orange;">二级医疗机构</span>
             <span v-if="company.organizationLevel==3" style="color:#d42c05;">三级医疗机构</span>
         </p>
         <p>资质审核 :
             <span v-if="company.audit==0">待审核</span>
             <span v-if="company.audit==1">审核通过</span>
             <span v-if="company.audit==2">正常营业中</span>
         </p>
         <p v-if="company.licenceStartTime!=null">许可证有效期 : <span> {{company.licenceStartTime}} 至 {{company.licenceEndTime}}</span></p>
      </div>

      <!--   医院资质介绍     -->
      <div class="com" style="margin-top: 0.5rem">
          <div class="customTitle">
              <h4>医院相关证书</h4>
          </div>
<!--          <div v-if="goods.length <= 0" style="font-weight: bold;font-size: 0.26rem;text-align: center">暂无相关信息！</div>-->
          <div class="customImg">
              <div v-if="goods == null" style="font-weight: bold;font-size: 0.26rem;text-align: center">暂无相关信息！</div>
              <div class="swiper-container">
                  <div class="swiper-wrapper">
                      <div v-for="(item,index) in goods " :key="index" class="swiper-slide">
                          <div class="share-detail">
                              <span v-if="item.url == null" style="font-weight: bold;font-size: 0.36rem;text-align: center;height: 2rem;width: 100%;display: inline-block">暂无图片</span>
                              <img v-if="item.url != null"  alt="无图片" class="goods-img" style="height: 4rem;width: 100%" :src="item.url" v-viewer>
                          </div>
                          <div class="goods-content">
                              {{ item.businessName }} : <span>{{ item.businessNumber }}</span>
                          </div>
                      </div>
                  </div>
              </div>

          </div>
      </div>

        <!--   医生资质介绍     -->
        <div class="com">
            <div class="customTitle">
                <h4>医生信息</h4>
            </div>
<!--            <div v-if="doctorList.length <= 0" style="font-weight: bold;font-size: 0.26rem;text-align: center">暂无相关信息！</div>-->
            <div class="customImg doctorImg">
                <div v-if="doctorList == null" style="font-weight: bold;font-size: 0.26rem;text-align: center">暂无相关信息！</div>
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div v-for="(item,index) in doctorList " :key="index" class="swiper-slide">
                            <div class="share-detail" >
                                <img alt="" class="goods-img"  style="height: 4rem;width: 100%"  :src="item.url" v-viewer>
                            </div>
                            <div class="goods-content">医生姓名：{{ item.name }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--   护士资质介绍     -->
        <div class="com">
            <div class="customTitle">
                <h4>护士信息</h4>
            </div>
            <div class="customImg">
                <div v-if="nurseList == null" style="font-weight: bold;font-size: 0.26rem;text-align: center;">暂无相关信息！</div>
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div v-for="(item,index) in nurseList " :key="index" class="swiper-slide" >
                            <div  class="share-detail" >
                                <img alt="" class="goods-img" style="height: 4rem;width: 100%" :src="item.url" v-viewer>
                            </div>
                            <div  class="goods-content">护士姓名：{{ item.name }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>


<script scoped>
import Swiper from 'swiper'
import Vue from 'vue'
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer, {
    defaultOptions: {
        zIndex: 9999
    }
})
import { getAction } from '@api/manage'
import {getUrlKey} from '@/utils/util'

  export default {
    data () {
      return {
        // 站点相关信息
        company : {},
        id : '',// 参数信息
        goods : [],
        doctorInfo:[
            {
                mainpic:'https://www.gzhc.vip/recycle/temp/%E6%8A%A4%E5%A3%AB_1646965945279.png',
                name:'加加加',

            },
            {
                mainpic:'https://www.gzhc.vip/recycle/temp/hushi_1646965924133.png',
                name:'见见见',
            },
            {
                mainpic:'https://www.gzhc.vip/recycle/temp/%E4%B8%8B%E8%BD%BD(3)_1646966292704.jpg',
                name:'成成成',
            },
            {
                mainpic:'https://www.gzhc.vip/recycle/temp/%E6%8A%A4%E5%A3%AB_1646965945279.png',
                name:'除除除',
            },
        ],
        doctorList:[],
        nurseList:[],
      }
    },

    // 获取当前路由信息
    // watch: {
    //   $route: {
    //     handler: function(route) {
    //       this.urlInfo = route.path
    //       this.params = route.query
    //     },
    //     immediate: true
    //   },
    // },

    created(){

      //获取地址栏参数
      this.id = getUrlKey('id')
      this.getDate()


    },

      mounted() {
          new Swiper('.swiper-container', {
              slidesPerView: 1,  //设置slider容器能够同时显示的slides数量
              spaceBetween: 2,  //每个swiper-slide的间隔距离
              centeredSlides: true,
              centeredSlidesBounds: true,
              loop: true, // 循环
              //设置自动播放间隔时间
              autoplay: {
                  delay: 3000,// 3秒切换一次
                  pauseOnMouseEnter: true, //悬停停止切换
              },
              // 轮播效果,默认为平滑轮播
              effect: "slide",
              pagination: '.swiper-pagination', // 如果需要分页器
              bulletClass: 'my-swiper-pagination-bullet', // 自定义分页器样式
              bulletActiveClass: 'my-bullet-active',   // 当前选中分页器样式
              // 如果需要前进后退按钮
              nextButton: '.swiper-button-next',
              prevButton: '.swiper-button-prev',
              // 如果需要滚动条
              // scrollbar: '.swiper-scrollbar',
              // 用户中断轮播后续播
              autoplayDisableOnInteraction: true,
              observer:true,//修改swiper自己或子元素时，自动初始化swiper
              observeParents:true//修改swiper的父元素时，自动初始化swiper
          })

      },

    methods:{
      // 查询回收站信息
      async getDate(){
        let params = {
          customerNumber: this.id
        }
        let res = await getAction('/hc/hcMedicalCare/customerInfo', params)
        let doctorData = []
        let doctorDataTwo = []
        let nurseData = []
        let nurseDataTwo = []
        if (res && res.success) {
          this.company = res.result
          let doctor = res.result.doctor
          let nurse = res.result.nurse
          this.goods = res.result.business
          if(doctor!=null){
              doctor.forEach((item,index) => {
                  if(item.qualificationCertificate!=null) {
                      if (item.qualificationCertificate.indexOf(',')) {
                          let obj = {
                              url: item.qualificationCertificate.split(','),
                              name: item.userName
                          }
                          doctorData.push(obj)
                      }
                  }
              })
              doctorData.forEach(item => {
                  item.url.forEach(url => {
                      doctorDataTwo.push({
                          url: [url],
                          name: item.name
                      });
                  });
              });
          }
          if(nurse!=null){
              nurse.forEach((item,index) => {
                  if(item.qualificationCertificate!=null) {
                      if (item.qualificationCertificate.indexOf(',')) {
                          let obj = {
                              url: item.qualificationCertificate.split(','),
                              name: item.userName
                          }
                          nurseData.push(obj)
                      }
                  }
              })
              nurseData.forEach(item => {
                  item.url.forEach(url => {
                      nurseDataTwo.push({
                          url: [url],
                          name: item.name
                      });
                  });
              });
          }



          this.doctorList = doctorDataTwo
          this.nurseList = nurseDataTwo

        }

      },





    },
  }
</script>

<style lang="less" scoped>
  body{
      font-size: 14px; // 1rem = 14px
  }
  .active{
    margin-right: 10%;
  }
  .board{
      background: #ffffff;
      padding: 0.3rem;
      .title{
          border-bottom: 1px #F6F6F6 solid;
          .titleLog{
              img{
                  width: 1rem;
                  height: 1rem;
                  border-radius: 0.1rem;
                  background-color: #6DB13A;
              }
          }
          .titleText{
              h3{
                  font-weight: 700;
                  font-size: 0.3rem;
                  margin-top:0.15rem;
                  color: #666666;
              }
              p{
                  margin-top:-0.15rem ;
                  font-size: 0.25rem;
                  color: #ABAAAA;
              }
          }
      }
      .cusInfo{
          margin-top: 0.25rem;
          p{
              font-size: 0.25rem;
              color:#ABAAAC ;
              line-height:0.25rem;
          }
          span{
              color: #666666;
              font-weight: 500;
          }
      }

    .siteInfo{
      h3{
        font-size: 0.3rem;
        font-family: Source Han Sans CN-Bold, Source Han Sans CN;
        font-weight: bold;
        color: #FFFFFF;
        margin-bottom: 0.25rem;
      }
      h2{
        font-size: 0.38rem;
        font-family: Source Han Sans CN-Bold, Source Han Sans CN;
        font-weight: bold;
        color: #FDEA55;
        line-height: 0.25rem;
      }

      .wasteType{
        margin-top: 0.4rem;
        a{
          margin-right: 0.08rem;
          border: 1px #ffffff solid;
          border-radius: 0.1rem;
          color:#ffffff;
          padding: 0.05rem;
        }
      }
      h4{
        margin: 0.25rem 0 0.2rem 0;
        color: #FFFFFF;
        font-size: 0.25rem;

      }
    }
  }


    .com{
        height: 4rem;
        margin-bottom: 2rem;
        .customTitle{
            border-bottom: 1px  #F6F6F6 solid;
            h4{
                font-weight: bold;
                font-size: 0.28rem;
                color: #6DB13A;
            }
        }
        .customImg{
            border: 1px #F6F6F6 solid ;
            padding: 0.25rem;
        }
    }

  .my-swiper-pagination-bullet {
      width: 0.5rem;
      height: 0.08rem;
      display: block;
      float: left;
      margin: 0;
      border-radius: 0;
      margin-top: 0.3rem;
      background: rgba(255, 255, 255, 0.37);
      margin-left: 1.3rem;
  }

  .my-swiper-pagination-bullet:nth-of-type(2) {
      position: relative;
      left: 1.6rem;
  }

  .my-swiper-pagination-bullet:nth-of-type(3) {
      position: relative;
      left: 3.1rem;
  }

  .my-bullet-active {
      background: #fff;
  }
  .goods-content{
      text-align: center;
      span{
          font-weight: bold;
      }
  }


</style>